import { Button } from 'antd';
import type React from 'react';
import {
  attachCluster,
  attachNode,
  detachCluster,
  detachNode,
} from '@/components/MapView/Mapless';
import styles from '../../index.module.less';
import type { TestControlProps } from '../types';

const Index: React.FC<TestControlProps> = ({ maplessRef }) => {
  function onDrawCluster(): void {
    const cMan = attachCluster(maplessRef.current, 'cm1');
    cMan?.drawCluster([
      {
        id: '1',
        latitude: 39.9,
        longitude: 116.4,
        icon: 'dzStadium',
        name: '北京',
      },
      {
        id: '2',
        latitude: 31.2,
        longitude: 121.5,
        icon: 'dzStadium_idle',
        name: '上海',
      },
      {
        id: '3',
        latitude: 22.5,
        longitude: 114.0,
        icon: 'dzStadium_idle',
        name: '广州',
      },
      {
        id: '4',
        latitude: 23.1,
        longitude: 113.3,
        icon: 'dzStadium_idle',
        name: '深圳',
      },
    ]);
    cMan?.on('nodeClick', () => {});
  }

  function onClearCluster(): void {
    detachCluster(maplessRef.current, 'cm1');
  }

  function onDrawNodes(): void {
    const nMan = attachNode(maplessRef.current, 'nm1');
    nMan?.drawNodes([
      {
        id: '1',
        latitude: 39.9,
        longitude: 116.4,
        icon: 'dzStadium',
        name: '北京',
      },
      {
        id: '2',
        latitude: 31.2,
        longitude: 121.5,
        icon: 'dzStadium_idle',
        name: '上海',
      },
      {
        id: '3',
        latitude: 22.5,
        longitude: 114.0,
        icon: 'dzStadium_idle',
        name: '广州',
      },
      {
        id: '4',
        latitude: 23.1,
        longitude: 113.3,
        icon: 'fly',
        name: '深圳',
      },
    ]);
    nMan?.on('nodeClick', () => {});
  }

  function onClearNodes(): void {
    detachNode(maplessRef.current, 'nm1');
  }

  return (
    <div className={styles.test}>
      <Button onClick={onDrawCluster}>绘制聚合</Button>
      <Button onClick={onClearCluster}>删除聚合</Button>
      <Button onClick={onDrawNodes}>绘制节点</Button>
      <Button onClick={onClearNodes}>删除节点</Button>
    </div>
  );
};

export default Index;
